<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>数据绑定</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		
		<div id="root">
            <!-- 遍历数组 -->
            <h2>人员列表</h2>
			<ul>
                <li v-for="(p,index) in persons" :key="index">
                    {{p.name}}-{{p.age}}--{{index}}
                </li>
            </ul>
            <!-- 遍历对象 -->
            <h2>汽车</h2>
            <ul>
                <li v-for="(value,k) in car" :key="key">
                    {{k}}--{{value}}

                </li>
            </ul>

            <!-- 遍历z字符串 -->
            <h2>测试遍历字符串</h2>
            <ul>
                <li v-for="(value,k) in str" :key="key">
                    {{k}}--{{value}}

                </li>
            </ul>

            <!-- 遍历指定次数 -->
            <h2>测试遍历字符串</h2>
            <ul>
                <li v-for="(number,index) in 5" :key="index">
                    {{index}}--{{number}}

                </li>
            </ul>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:'#root',
			data:{
				persons:[
                    {id:'001',name:'张三',age:18},
                    {id:'002',name:'李四',age:19},
                    {id:'003',name:'王五',age:20},
                ],
                car:{
                    name:'奥迪A8',
                    price:'70万',
                    color:'黑色',
                },
                str:"hello",
			}
		})
	</script>
</html>